<template>
    <div class="login" style="background-color: #444444">
        <div class="content">
            <div class="title">
                拉那儿后台管理系统
            </div>
            <input v-model="mobile" type="text" placeholder="用户名">
            <input v-model="password" type="password" placeholder="密码">
            <div class="code">
                <input v-model="code" type="text" placeholder="验证码">
                <img :src="codeimg" v-if="codeimg" @click="getImg()">
            </div>
            <div class="btn">
                <Button style="width: 280px;height: 36px;font-size: 16px" type="primary" :loading="loading"
                        @click="login">
                    <span v-if="!loading">登录</span>
                    <span v-else>Loading...</span>
                </Button>
            </div>
        </div>
        <canvas style="background: #000000;" id="canvas"></canvas>
    </div>
</template>

<script type="text/ecmascript-6">
    import Axios from 'axios';
    import ipServer from '../model/ip';
    import sessionUtils from '../model/sessionUtils';

    export default {
        name: 'login',
        data() {
            return {
                mobile: "",
                password: "",
                codeimg: "",
                code: "",
                loading: false,
                captchaId: ""
            }
        },
        mounted() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var s = window.screen;
            var w = s.width;
            var h = s.height;
            canvas.width = w;
            canvas.height = h;
            var fontSize = 14;
            var clos = Math.floor(w / fontSize);
            var drops = [];
            var str = "qwertyuioplkjhgfdsazxcvbnm";
            for (var i = 0; i < clos; i++) {
                drops.push(0);
            }

            function drawString() {
                ctx.fillStyle = "rgba(0,0,0,0.05)"
                ctx.fillRect(0, 0, w, h);
                ctx.font = "600 " + fontSize + "px 微软雅黑";
                ctx.fillStyle = "#0ca5f5";
                for (var i = 0; i < clos; i++) {
                    var x = i * fontSize;
                    var y = drops[i] * fontSize;
                    ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y);
                    if (y > h && Math.random() > 0.99) {
                        drops[i] = 0;
                    }
                    drops[i]++;
                }

            }

            setInterval(drawString, 30);
            if (sessionUtils.getSession("token") && sessionUtils.getSession("headerImg") && sessionUtils.getSession("mobile")) {
                this.$router.push("/superAdmin");
                return;
            }
            sessionUtils.clear();
            this.getImg();
        }, methods: {
            getImg() {
                Axios.get(ipServer + 'login/codeimg')
                    .then(res => {
                        this.codeimg = res.data.data.base64Img;
                        this.captchaId = res.data.data.captchaId;
                    })
                    .catch(err => {
                        this.$Message.info(err);
                    });
            },
            login() {
                this.loading = true;
                var param = new URLSearchParams();
                param.append('mobile', this.mobile);
                param.append('password', this.password);
                param.append('codeImgSubmit', this.code);
                param.append('captchaId', this.captchaId);

                Axios.post(ipServer + "login/login", param)
                    .then(res => {

                        this.loading = false;
                        if (res.data.code != 0) {
                            this.$Message.info(res.data.msg);
                        } else {
                            sessionUtils.setSession("headerImg", res.data.data.head);
                            sessionUtils.setSession("mobile", res.data.data.mobile);
                            sessionUtils.setSession("roleId", res.data.data.roleId + "");
                            sessionUtils.setSession("token", res.data.token);
                            if (sessionUtils.getSession("roleId") == "1") {
                                this.$router.push("/superAdmin");
                            } else {
                                this.$router.push("/commonAdmin");
                            }
                        }
                    })
                    .catch(err => {
                        this.loading = false;
                        this.$Message.info(err);
                    });
            }
        }
    }
</script>

<style scoped>
    @import "../assets/css/login.css";

    #canvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }
</style>
